<template>
	<view>
		<u-transition :show="show">
			<template v-if="videoData.video_title">
				<view class="modal-nav">
					<template v-if="imageUrl">
						<image class="modal-image" mode="aspectFill" :src="imageUrl"></image>
					</template>
					<view class="flex flex-column flex-1 ml-16">
						<view class="flex ai-center jc-between">
							<text class="font-36 color-fff font-bold text-ellipsis">{{ videoData.video_title }}</text>
							<u-icon name="close" color="#fff" size="36rpx" @click="closeClick()"></u-icon>
						</view>
						<view class="flex ai-center jc-between" style="margin-top: auto;">
							<text class="font-28 color-fff">上次看到第{{ videoData.episode }}集</text>
							<view class="main-btn">
								<u-button text="继续观看" type="primary" shape="circle" @click="handleContinue()">
								</u-button>
							</view>
						</view>
					</view>
				</view>
			</template>
		</u-transition>
	</view>
</template>

<script>
export default {
  name: 'IndexHistoryModal',
  props: {
    videoData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      show: true,
      imageUrl: undefined,
    }
  },
  watch: {
    videoData: {
      handler(val) {
        if(val.cover) this.imageUrl = val.cover.url
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    closeClick() {
      this.show = false
    },
    handleContinue() {
      const { video_id } = this.$props.videoData
      uni.navigateTo({ url: `/pages/player/player?library_id=${video_id}` })
    },
  }
}
</script>

<style lang="scss" scoped>
	.modal-nav {
		position: fixed;
		z-index: 2;
		bottom: 0;
		left: 0;
		right: 0;
		width: 90%;
		margin: 0 auto;
		display: flex;
		background-image: linear-gradient(to right, rgba(131, 110, 67, 0.8), rgba(109, 149, 152, 0.8));
		background-color: opacity(0.8);
		border-radius: 24rpx;
		padding: 20rpx;
	}

	.modal-image {
		width: 120rpx;
		height: 170rpx;
		border-radius: 16rpx;
	}
</style>
